<template>
	<div class="page">
		<p class="title">基本用法</p>
		<p>
			<gr-input v-model="addr" suffix-icon="arrow-right-bold" @click="show" @icon-click="show" />
		</p>
		<gr-popup v-model="isShowCascader">
			<gr-cascader v-model="addr" :options="options" @confirm="hide" />
		</gr-popup>
	</div>
</template>

<script>
	export default {
		data() {
			return {
				addr: '',
				isShowCascader: false,
				options: [
					{
						text: '河南省',
						value: '330000',
						children: [
							{ 
								text: '安阳市', 
								value: '330100',
								children: [
									{ text: '北关区', value: '330110' },
									{ 
										text: '龙安区', 
										value: '330120',
										children: [
											{ text: '商都路', value: '330121' },
											{ text: '清风路', value: '330122' },
											{ text: '幸福路', value: '330123' },
										]
									},
									{ text: '殷都区', value: '330130' }
								]
							},
							{ 
								text: '新乡市', 
								value: '330200',
								children: [
									{ text: '牧野区', value: '330210' },
									{ text: '凤泉区', value: '330220' }
								]
							},
							{ 
								text: '郑州市', 
								value: '330300',
								children: [
									{ text: '中原区', value: '330310' },
									{ text: '二七区', value: '330320' },
									{ text: '金水区', value: '330320' }
								]
							},
						],
					},
					{
						text: '陕西省',
						value: '320000',
						children: [
							{ 
								text: '西安市', 
								value: '320100',
								children: [
									{ text: '长安区', value: '320110' },
									{ text: '碑林区', value: '320120' },
									{ text: '临潼区', value: '320130' },
									{ text: '高陵区', value: '320140' },
									{ text: '鄂邑区', value: '320150' }
								]
							}
						],
					}
				]
			}
		},
		mounted() {
			
		},
		methods: {
			show() {
				this.isShowCascader = true;
			},
			hide() {
				this.isShowCascader = false;
			}
		}
	}
</script>

<style lang="scss">
	.page {
		padding: 0 10px;
	}
</style>
